<template>
  <a-modal
    :open="visible"
    title="新建课程"
    :footer="null"
    style="min-width:75%"
    :body-style="{ border: 'none', padding: '0'}"
    @cancel="closeModal"
  >
    <div class="Addclass-Content-Input">
      <a-form @submit.prevent="handleSubmit" :model="formState" name="basic" autocomplete="off">
        <a-form-item name="course_name" :rules="[{ required: true, message: '请输入课程名称' }]">
          <div class="Addclass-Content-Input-Col">
            <div class="Addclass-Content-Input-Col-Title">课程名称*</div>
            <a-input v-model:value="formState.course_name" placeholder="不超过 10 个汉字，20 个字母" />
          </div>
        </a-form-item>
        <a-form-item name="course_number" :rules="[{ required: true, message: '请输入课程编号' }]">
          <div class="Addclass-Content-Input-Col">
            <div class="Addclass-Content-Input-Col-Title">课程编号*</div>
            <a-input v-model:value="formState.course_number" placeholder="不超过 10 个汉字，20 个字母" />
          </div>
        </a-form-item>
        <a-form-item name="course_class" :rules="[{ required: true, message: '请选择课程性质' }]">
          <div class="Addclass-Content-Input-Col">
            <div class="Addclass-Content-Input-Col-Title">课程性质*</div>
            <a-select v-model:value="formState.course_class" placeholder="请选择" class="category-select">
              <a-select-option value="专业课程">专业课程</a-select-option>
              <a-select-option value="专业核心">专业核心</a-select-option>
              <a-select-option value="学科基础">学科基础</a-select-option>
              <a-select-option value="通识基础">通识基础</a-select-option>
              <a-select-option value="通识核心">通识核心</a-select-option>
              <a-select-option value="通识扩展">通识扩展</a-select-option>
              <a-select-option value="实践必修">实践必修</a-select-option>
              <a-select-option value="实践选修">实践选修</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </div>
        </a-form-item>
        <a-form-item name="student_list" :rules="[{ required: true, message: '请输入学生学号' }]">
          <div class="Addclass-Content-Input-Col">
            <div class="Addclass-Content-Input-Col-Title">加入学生*</div>
            <a-textarea v-model:value="formState.student_list" placeholder="可以将所有学生的学号粘贴至此处，使用英文逗号分隔" :autoSize="{ minRows: 5}" />
          </div>
        </a-form-item>
        <a-form-item name="course_description">
          <div class="Addclass-Content-Input-Col">
            <div class="Addclass-Content-Input-Col-Title">课程简介</div>
            <a-textarea v-model:value="formState.course_description" placeholder="不超过200字" :autoSize="{ minRows: 7}" />
          </div>
        </a-form-item>
        <div class="Addclass-Content-Confirm">
          <a-form-item>
            <a-button type="primary" html-type="submit">确认新建</a-button>
          </a-form-item>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { reactive, defineProps, defineEmits } from 'vue';
import api from '../../api/index';
import { message } from 'ant-design-vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:visible']);

const formState = reactive({
  course_name: '',
  course_number: '',
  course_class: '',
  student_list: '',
  course_description: '',
});

const handleSubmit = async () => {
  try {
    // 将学生学号字符串转换为数组
    formState.student_list = formState.student_list.split(',').map(item => item.trim());
    
    const response = await api.createCourse(formState);
    console.log(response.data);
    message.success("课程创建成功");
    emit('update:visible', false);
  } catch (error) {
    console.error("课程创建失败", error);
    message.error("课程创建失败");
  }
};

const closeModal = () => {
  emit('update:visible', false);
};
</script>

<style lang="scss">
.category-cascader {
  margin-left: 24px;
  vertical-align: top;
}

.Addclass-container {
  width: 100%;
  height: auto;
  display: flex;
  background: #F6F8F7;
}

.Title {
  color: #262626;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  margin-left: 0;
  margin-bottom: 30px;
}

.Addclass-Content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid #EDEDED;
  background: #FFF;
  box-shadow: 0 2px 2px 0 #F2F2F2;
  position: relative;
}

.Addclass-Content-Confirm {
  margin-top: 16px;
}

.Addclass-Content-Confirm .ant-btn {
  border-radius: 12px;
  background: #262626;
  width: 96px;
  height: 40px;
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.Addclass-Content-Input {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.Addclass-Content-Input-Col {
  width: 416px;
  margin-top: 15px;
  font-size: 0;
}

.Addclass-Content-Input-Col-Title {
  overflow: hidden;
  color: #262626;
  text-align: justify;
  text-overflow: ellipsis;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 64px;
  height: 20px;
  vertical-align: top;
  display: inline-block;
  margin-left: 0;
}

.Addclass-Content-Input-Col .ant-input {
  width: 416px;
  vertical-align: top;
  display: inline-block;
  margin-left: 24px;
}

.Addclass-Content-Input-Col .ant-input::placeholder {
  color: #BFBFBF;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

</style>